<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>介绍 | lilei</title>
    <meta name="generator" content="VuePress 1.8.2">
    <link rel="icon" href="/images/icons/logo.png">
    <link rel="apple-touch-icon" href="/images/icons/logo.png">
    <link rel="manifest" href="/manifest.json">
    <script type="text/javascript" src="/assets/js/load.js"></script>
    <meta name="description" content="个人网站">
    <meta name="image" content="http://www.lileiblog.xyz/images/form/效果.png">
    <meta name="twitter:title" content="介绍">
    <meta name="twitter:description" content="">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:image" content="http://www.lileiblog.xyz/images/form/效果.png">
    <meta name="twitter:url" content="http://www.lileiblog.xyz/Form/">
    <meta property="og:type" content="article">
    <meta property="og:title" content="介绍">
    <meta property="og:description" content="">
    <meta property="og:image" content="http://www.lileiblog.xyz/images/form/效果.png">
    <meta property="og:url" content="http://www.lileiblog.xyz/Form/">
    <meta property="og:site_name" content="lilei">
    <meta itemprop="name" content="介绍">
    <meta itemprop="description" content="">
    <meta itemprop="image" content="http://www.lileiblog.xyz/images/form/效果.png">
    <meta name="theme-color" content="#3eaf7c">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="msapplication-TileImage" content="/images/icons/logo.png">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="keywords" content="lilei,vue,vuepress,vuepress-theme,theme,主题,vuepress主题,blog
        ,vuepress-blog,java,python,shell,sql,golang,script,shell script,nginx,windows,去广告,androd,google drive
        ,one drive,idea,eclipse,git,小程序">
    <meta name="referrer" content="never">
    
    <link rel="preload" href="/assets/css/0.styles.8932179b.css" as="style"><link rel="preload" href="/assets/js/app.269009d6.js" as="script"><link rel="preload" href="/assets/js/3.974b9720.js" as="script"><link rel="preload" href="/assets/js/12.8bb86d91.js" as="script"><link rel="prefetch" href="/assets/js/10.5915e99b.js"><link rel="prefetch" href="/assets/js/11.ff732762.js"><link rel="prefetch" href="/assets/js/13.18bde5b0.js"><link rel="prefetch" href="/assets/js/14.314fae34.js"><link rel="prefetch" href="/assets/js/15.0a4ff48f.js"><link rel="prefetch" href="/assets/js/16.ffaf1503.js"><link rel="prefetch" href="/assets/js/17.49a31a6e.js"><link rel="prefetch" href="/assets/js/18.7e6443bf.js"><link rel="prefetch" href="/assets/js/19.6880cc9a.js"><link rel="prefetch" href="/assets/js/20.1fb3f255.js"><link rel="prefetch" href="/assets/js/21.0cd39eea.js"><link rel="prefetch" href="/assets/js/22.392d85cb.js"><link rel="prefetch" href="/assets/js/23.f50adb15.js"><link rel="prefetch" href="/assets/js/24.43e324e1.js"><link rel="prefetch" href="/assets/js/25.e3663205.js"><link rel="prefetch" href="/assets/js/26.da141fb8.js"><link rel="prefetch" href="/assets/js/27.6c05235a.js"><link rel="prefetch" href="/assets/js/28.c124245a.js"><link rel="prefetch" href="/assets/js/29.d185870d.js"><link rel="prefetch" href="/assets/js/30.8587d422.js"><link rel="prefetch" href="/assets/js/31.dc382b56.js"><link rel="prefetch" href="/assets/js/32.20ba32e9.js"><link rel="prefetch" href="/assets/js/33.6ecd7de9.js"><link rel="prefetch" href="/assets/js/34.2b91c13a.js"><link rel="prefetch" href="/assets/js/35.66ed0733.js"><link rel="prefetch" href="/assets/js/36.ce7bca84.js"><link rel="prefetch" href="/assets/js/37.d00bb5ac.js"><link rel="prefetch" href="/assets/js/38.c3ecbb6f.js"><link rel="prefetch" href="/assets/js/39.308f4175.js"><link rel="prefetch" href="/assets/js/4.520f6ecc.js"><link rel="prefetch" href="/assets/js/40.f4b98bc2.js"><link rel="prefetch" href="/assets/js/41.95fae64f.js"><link rel="prefetch" href="/assets/js/42.fe4f877b.js"><link rel="prefetch" href="/assets/js/43.ca8f222e.js"><link rel="prefetch" href="/assets/js/44.4d4ee79e.js"><link rel="prefetch" href="/assets/js/45.79178b33.js"><link rel="prefetch" href="/assets/js/46.c3817d0b.js"><link rel="prefetch" href="/assets/js/47.b8252443.js"><link rel="prefetch" href="/assets/js/48.df9d5d3b.js"><link rel="prefetch" href="/assets/js/49.d812fdb2.js"><link rel="prefetch" href="/assets/js/5.f1a24a16.js"><link rel="prefetch" href="/assets/js/50.55cfcaa8.js"><link rel="prefetch" href="/assets/js/51.b8608b02.js"><link rel="prefetch" href="/assets/js/52.52c5e00d.js"><link rel="prefetch" href="/assets/js/53.3a9bd5fb.js"><link rel="prefetch" href="/assets/js/54.a4240c13.js"><link rel="prefetch" href="/assets/js/55.01c4b876.js"><link rel="prefetch" href="/assets/js/56.f29549a3.js"><link rel="prefetch" href="/assets/js/57.01438a04.js"><link rel="prefetch" href="/assets/js/58.29bb4626.js"><link rel="prefetch" href="/assets/js/59.e8b89408.js"><link rel="prefetch" href="/assets/js/6.8c478b39.js"><link rel="prefetch" href="/assets/js/60.bedb5381.js"><link rel="prefetch" href="/assets/js/61.bdfbe584.js"><link rel="prefetch" href="/assets/js/62.cb825d1a.js"><link rel="prefetch" href="/assets/js/63.a9516572.js"><link rel="prefetch" href="/assets/js/64.aa854ed7.js"><link rel="prefetch" href="/assets/js/65.285f883d.js"><link rel="prefetch" href="/assets/js/66.12849f37.js"><link rel="prefetch" href="/assets/js/67.c18b00e4.js"><link rel="prefetch" href="/assets/js/68.fa59daa9.js"><link rel="prefetch" href="/assets/js/69.e9d5dda4.js"><link rel="prefetch" href="/assets/js/7.cfb0d0ea.js"><link rel="prefetch" href="/assets/js/70.db126cce.js"><link rel="prefetch" href="/assets/js/71.6acb04cd.js"><link rel="prefetch" href="/assets/js/72.7ff0ab11.js"><link rel="prefetch" href="/assets/js/73.9a66da79.js"><link rel="prefetch" href="/assets/js/74.0a38a030.js"><link rel="prefetch" href="/assets/js/75.7b32dbb3.js"><link rel="prefetch" href="/assets/js/8.cb9c08e5.js"><link rel="prefetch" href="/assets/js/9.ad652cfe.js"><link rel="prefetch" href="/assets/js/vendors~flowchart.110a1065.js">
    <link rel="stylesheet" href="/assets/css/0.styles.8932179b.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><img src="/images/icons/logo.png" alt="lilei" class="logo"> <span class="site-name can-hide">lilei</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/Form/" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  Form
</a></div><div class="nav-item"><a href="/IDE/" class="nav-link">
  IDE
</a></div><div class="nav-item"><a href="/Java/" class="nav-link">
  Java
</a></div><div class="nav-item"><a href="/Other/" class="nav-link">
  Other
</a></div><div class="nav-item"><a href="/Python/" class="nav-link">
  Python
</a></div><div class="nav-item"><a href="/SQL/" class="nav-link">
  SQL
</a></div><div class="nav-item"><a href="/Shell/" class="nav-link">
  Shell
</a></div><div class="nav-item"><a href="/System/" class="nav-link">
  System
</a></div> <a href="https://github.com/woytu/notes-vuepress" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/Form/" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  Form
</a></div><div class="nav-item"><a href="/IDE/" class="nav-link">
  IDE
</a></div><div class="nav-item"><a href="/Java/" class="nav-link">
  Java
</a></div><div class="nav-item"><a href="/Other/" class="nav-link">
  Other
</a></div><div class="nav-item"><a href="/Python/" class="nav-link">
  Python
</a></div><div class="nav-item"><a href="/SQL/" class="nav-link">
  SQL
</a></div><div class="nav-item"><a href="/Shell/" class="nav-link">
  Shell
</a></div><div class="nav-item"><a href="/System/" class="nav-link">
  System
</a></div> <a href="https://github.com/woytu/notes-vuepress" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>Form</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/Form/" aria-current="page" class="active sidebar-link">介绍</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/Form/#此项目作用" class="sidebar-link">此项目作用</a></li><li class="sidebar-sub-header"><a href="/Form/#下载" class="sidebar-link">下载</a></li><li class="sidebar-sub-header"><a href="/Form/#使用" class="sidebar-link">使用</a></li></ul></li><li><a href="/Form/Go操作Windows.html" class="sidebar-link">Go操作Windows</a></li><li><a href="/Form/Go爬虫.html" class="sidebar-link">Go爬虫</a></li><li><a href="/Form/Go笔记.html" class="sidebar-link">Go笔记</a></li><li><a href="/Form/Go编译打包.html" class="sidebar-link">Go编译打包</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="介绍"><a href="#介绍" class="header-anchor">#</a> 介绍</h1> <p></p><div class="table-of-contents"><ul><li><a href="#此项目作用">此项目作用</a></li><li><a href="#下载">下载</a></li><li><a href="#使用">使用</a></li></ul></div><p></p> <h2 id="此项目作用"><a href="#此项目作用" class="header-anchor">#</a> 此项目作用</h2> <p><a href="https://github.com/GIT1-HUB/vue-dynamic-form-element-master" target="_blank" rel="noopener noreferrer">vue-dynamic-form-element-master<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>是一个基于vue和element-ui的可json配置表单组件，它的作用是实现json管理表单，减少重复代码的编写</p> <h2 id="下载"><a href="#下载" class="header-anchor">#</a> 下载</h2> <p>演示项目地址：<a href="https://github.com/GIT1-HUB/vue-dynamic-form-element-master" target="_blank" rel="noopener noreferrer">dynamic-form<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>
组件在components下的dynamic-form文件</p> <h2 id="使用"><a href="#使用" class="header-anchor">#</a> 使用</h2> <ol><li>引入dynamic-form</li></ol> <div class="language-bash extra-class"><pre class="language-bash"><code>	<span class="token function">import</span> DynamicForm from <span class="token string">'@/components/dynamic-form'</span>
</code></pre></div><ol start="2"><li>注册组件</li></ol> <div class="language-bash extra-class"><pre class="language-bash"><code>	components: <span class="token punctuation">{</span>
  	    DynamicForm
	<span class="token punctuation">}</span>,
</code></pre></div><ol start="3"><li>在template中使用</li></ol> <div class="language-bash extra-class"><pre class="language-bash"><code>	<span class="token operator">&lt;</span>dynamic-form <span class="token assign-left variable">ref</span><span class="token operator">=</span><span class="token string">&quot;form&quot;</span> v-model<span class="token operator">=</span><span class="token string">&quot;formData&quot;</span> :model<span class="token operator">=</span><span class="token string">&quot;formModel&quot;</span> /<span class="token operator">&gt;</span>
	<span class="token operator">&lt;</span>el-button <span class="token assign-left variable">type</span><span class="token operator">=</span><span class="token string">&quot;primary&quot;</span> @click<span class="token operator">=</span><span class="token string">&quot;submit&quot;</span><span class="token operator">&gt;</span>提交<span class="token operator">&lt;</span>/el-button<span class="token operator">&gt;</span>
</code></pre></div><ol start="4"><li>在data中定义formData以及formModel</li></ol> <div class="language-bash extra-class"><pre class="language-bash"><code>    formData: <span class="token punctuation">{</span><span class="token punctuation">}</span>,
      formModel: <span class="token punctuation">{</span>
        fields: <span class="token punctuation">[</span>
          <span class="token punctuation">{</span>
            type: <span class="token string">'group'</span>,
            name: <span class="token string">'2222'</span>
          <span class="token punctuation">}</span>,
          <span class="token punctuation">{</span>
            code: <span class="token string">'code'</span>, // 字段编码
            name: <span class="token string">'编码'</span>, // 字段名称
            type: <span class="token string">'string'</span>, // 使用的控件类型
            default: <span class="token string">''</span>, // 默认值
            span: <span class="token number">2</span>, // 当表单为inline模式时当前字段控件占用的列数
            rules: <span class="token punctuation">[</span> // 校验规则 type<span class="token punctuation">(</span>range<span class="token punctuation">\</span>phone<span class="token punctuation">\</span>email<span class="token punctuation">)</span> pattern<span class="token punctuation">(</span>正则表达式<span class="token punctuation">\</span>正则表达式 字符串<span class="token punctuation">)</span>
              <span class="token punctuation">{</span> required: true, message: <span class="token string">'请输入编码'</span>, trigger: <span class="token string">'blur'</span> <span class="token punctuation">}</span>,
              <span class="token punctuation">{</span> type: <span class="token string">'range'</span>, max: <span class="token number">10</span>, min: <span class="token number">5</span>, message: <span class="token string">'编码长度应该大于5小于10'</span> <span class="token punctuation">}</span>,
              <span class="token punctuation">{</span> type: <span class="token string">'phone'</span>, message: <span class="token string">'请输入正确电话号码'</span> <span class="token punctuation">}</span>,
              <span class="token punctuation">{</span> pattern: <span class="token string">'/^1[3456789]\\d{9}$/'</span>, message: <span class="token string">'请输入正确电话号sds码s'</span> <span class="token punctuation">}</span>
            <span class="token punctuation">]</span>,
            attrs: <span class="token punctuation">{</span> // iview中存在的控件属性参考iview对应控件属性设置
              placeholder: <span class="token string">'请输入编码'</span>// disabled: <span class="token boolean">true</span>
            <span class="token punctuation">}</span>
          <span class="token punctuation">}</span>,
          <span class="token punctuation">{</span>
            code: <span class="token string">'amount'</span>,
            name: <span class="token string">'金额'</span>,
            type: <span class="token string">'number'</span>,
            rules: <span class="token punctuation">[</span>
              <span class="token punctuation">{</span> required: true, message: <span class="token string">'请输入金额'</span>, trigger: <span class="token string">'blur'</span> <span class="token punctuation">}</span>
            <span class="token punctuation">]</span>
          <span class="token punctuation">}</span>,
          <span class="token punctuation">{</span> // arrStruct 字段为对象数组<span class="token punctuation">[</span><span class="token punctuation">{</span><span class="token punctuation">}</span>,<span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">]</span>
            // <span class="token number">1</span>.当数组中每一项对象字段相同时children为对象类型只需要一个fields描述即可，当数组的值为string或number时fields中只包含一个控件的描述并且不要code值<span class="token punctuation">[</span><span class="token string">'1'</span>,<span class="token string">'2'</span><span class="token punctuation">]</span>
            // <span class="token number">2</span>.当每一项对象包含字段不同时children为数组类型数组的每一项都有一个fields各自描述自己的字段组成<span class="token punctuation">[</span><span class="token punctuation">{</span>fields:<span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">}</span>,<span class="token punctuation">{</span>fields:<span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token punctuation">]</span>
            code: <span class="token string">'arrStruct'</span>,
            name: <span class="token string">'arr分组'</span>,
            type: <span class="token string">'arrStruct'</span>,
            attrs: <span class="token punctuation">{</span> labelPosition: <span class="token string">'right'</span>, labelWidth: <span class="token string">'80'</span> <span class="token punctuation">}</span>,
            children: <span class="token punctuation">{</span>
              fields: <span class="token punctuation">[</span>
                <span class="token punctuation">{</span>
                  code: <span class="token string">'group1'</span>,
                  name: <span class="token string">'group1'</span>,
                  type: <span class="token string">'string'</span>,
                  attrs: <span class="token punctuation">{</span> placeholder: <span class="token string">'请输入group1'</span> <span class="token punctuation">}</span>
                <span class="token punctuation">}</span>,
                <span class="token punctuation">{</span>
                  code: <span class="token string">'group2'</span>,
                  name: <span class="token string">'group22'</span>,
                  type: <span class="token string">'number'</span>,
                  rules: <span class="token punctuation">[</span>
                    <span class="token punctuation">{</span> required: true, message: <span class="token string">'请输入group2'</span>, trigger: <span class="token string">'blur'</span> <span class="token punctuation">}</span>
                  <span class="token punctuation">]</span>
                <span class="token punctuation">}</span>
              <span class="token punctuation">]</span>
            <span class="token punctuation">}</span>
          <span class="token punctuation">}</span>,
          <span class="token punctuation">{</span> // objStruct或form 字段为对象<span class="token punctuation">{</span>a:<span class="token string">''</span>,b:<span class="token string">''</span><span class="token punctuation">}</span>
            code: <span class="token string">'objStruct'</span>,
            name: <span class="token string">'obj分组'</span>,
            type: <span class="token string">'objStruct'</span>, // objStruct 或 form
            attrs: <span class="token punctuation">{</span> labelPosition: <span class="token string">'right'</span>, labelWidth: <span class="token string">'80'</span> <span class="token punctuation">}</span>,
            children: <span class="token punctuation">{</span>
              fields: <span class="token punctuation">[</span>
                <span class="token punctuation">{</span>
                  code: <span class="token string">'group1'</span>,
                  name: <span class="token string">'group1'</span>,
                  type: <span class="token string">'string'</span>,
                  attrs: <span class="token punctuation">{</span> placeholder: <span class="token string">'请输入group1'</span> <span class="token punctuation">}</span>
                <span class="token punctuation">}</span>,
                <span class="token punctuation">{</span>
                  code: <span class="token string">'group2'</span>,
                  name: <span class="token string">'group22'</span>,
                  type: <span class="token string">'number'</span>,
                  rules: <span class="token punctuation">[</span>
                    <span class="token punctuation">{</span> required: true, message: <span class="token string">'请输入group2'</span>, trigger: <span class="token string">'blur'</span> <span class="token punctuation">}</span>
                  <span class="token punctuation">]</span>
                <span class="token punctuation">}</span>
              <span class="token punctuation">]</span>
            <span class="token punctuation">}</span>
          <span class="token punctuation">}</span>,
          <span class="token punctuation">{</span>
            code: <span class="token string">'progress'</span>,
            name: <span class="token string">'进度'</span>,
            type: <span class="token string">'percent'</span>,
            rules: <span class="token punctuation">[</span>
              <span class="token punctuation">{</span> required: true, message: <span class="token string">'请选择进度'</span> <span class="token punctuation">}</span>
            <span class="token punctuation">]</span>
          <span class="token punctuation">}</span>,
          <span class="token punctuation">{</span>
            code: <span class="token string">'area'</span>,
            name: <span class="token string">'地区'</span>,
            type: <span class="token string">'select'</span>,
            attrs: <span class="token punctuation">{</span> placeholder: <span class="token string">'请选择地区'</span> <span class="token punctuation">}</span>,
            dataList: <span class="token punctuation">[</span>
              <span class="token punctuation">{</span> value: <span class="token string">'北京'</span>, name: <span class="token string">'北京'</span> <span class="token punctuation">}</span>,
              <span class="token punctuation">{</span> value: <span class="token string">'南京'</span>, name: <span class="token string">'南京'</span> <span class="token punctuation">}</span>
            <span class="token punctuation">]</span>,
            rules: <span class="token punctuation">[</span>
              <span class="token punctuation">{</span> required: true, message: <span class="token string">'请选择地区'</span>, trigger: <span class="token string">'change'</span> <span class="token punctuation">}</span>
            <span class="token punctuation">]</span>
          <span class="token punctuation">}</span>,
          <span class="token punctuation">{</span>
            code: <span class="token string">'des'</span>,
            name: <span class="token string">'说明'</span>,
            type: <span class="token string">'text'</span>,
            attrs: <span class="token punctuation">{</span> placeholder: <span class="token string">'请输入说明'</span> <span class="token punctuation">}</span>,
            rules: <span class="token punctuation">[</span>
              <span class="token punctuation">{</span> required: true, message: <span class="token string">'请输入说明'</span>, trigger: <span class="token string">'blur'</span> <span class="token punctuation">}</span>
            <span class="token punctuation">]</span>
          <span class="token punctuation">}</span>,
          <span class="token punctuation">{</span>
            code: <span class="token string">'citys'</span>,
            name: <span class="token string">'城市'</span>,
            type: <span class="token string">'selectMulti'</span>,
            required: true,
            dataList: <span class="token punctuation">[</span>
              <span class="token punctuation">{</span> value: <span class="token string">'北京'</span>, name: <span class="token string">'北京'</span> <span class="token punctuation">}</span>,
              <span class="token punctuation">{</span> value: <span class="token string">'南京'</span>, name: <span class="token string">'南京'</span> <span class="token punctuation">}</span>
            <span class="token punctuation">]</span>,
            rules: <span class="token punctuation">[</span>
              <span class="token punctuation">{</span> required: true, message: <span class="token string">'请选择城市'</span>, trigger: <span class="token string">'change'</span> <span class="token punctuation">}</span>
            <span class="token punctuation">]</span>
          <span class="token punctuation">}</span>,
          <span class="token punctuation">{</span>
            code: <span class="token string">'good'</span>,
            name: <span class="token string">'宜居'</span>,
            type: <span class="token string">'radioGroup'</span>,
            dataList: <span class="token punctuation">[</span>
              <span class="token punctuation">{</span> value: <span class="token number">1</span>, name: <span class="token string">'是'</span> <span class="token punctuation">}</span>,
              <span class="token punctuation">{</span> value: <span class="token number">2</span>, name: <span class="token string">'否'</span> <span class="token punctuation">}</span>
            <span class="token punctuation">]</span>,
            attrs: <span class="token punctuation">{</span> type: <span class="token string">'button'</span> <span class="token punctuation">}</span>,
            rules: <span class="token punctuation">[</span>
              <span class="token punctuation">{</span> required: true, message: <span class="token string">'请选择'</span> <span class="token punctuation">}</span>
            <span class="token punctuation">]</span>
          <span class="token punctuation">}</span>,
          <span class="token punctuation">{</span>
            code: <span class="token string">'accept'</span>,
            name: <span class="token string">'接受'</span>,
            type: <span class="token string">'checkbox'</span>
          <span class="token punctuation">}</span>,
          <span class="token punctuation">{</span>
            code: <span class="token string">'applyType'</span>,
            name: <span class="token string">'申请类型'</span>,
            type: <span class="token string">'checkList'</span>,
            dataList: <span class="token punctuation">[</span><span class="token punctuation">{</span>
              name: <span class="token string">'疾病'</span>,
              value: <span class="token string">'疾病'</span>
            <span class="token punctuation">}</span>,
            <span class="token punctuation">{</span>
              name: <span class="token string">'意外'</span>,
              value: <span class="token string">'意外'</span>
            <span class="token punctuation">}</span>
            <span class="token punctuation">]</span>
          <span class="token punctuation">}</span>,
          <span class="token punctuation">{</span>
            code: <span class="token string">'isOpen'</span>,
            name: <span class="token string">'是否打开'</span>,
            type: <span class="token string">'switch'</span>,
            rules: <span class="token punctuation">[</span>
              <span class="token punctuation">{</span> required: true, message: <span class="token string">'请选择进度'</span> <span class="token punctuation">}</span>
            <span class="token punctuation">]</span>
          <span class="token punctuation">}</span>,
          <span class="token punctuation">{</span>
            code: <span class="token string">'date'</span>,
            name: <span class="token string">'日期'</span>,
            type: <span class="token string">'date'</span>,
            attrs: <span class="token punctuation">{</span> placeholder: <span class="token string">'请'</span> <span class="token punctuation">}</span>
          <span class="token punctuation">}</span>,
          <span class="token punctuation">{</span>
            code: <span class="token string">'time'</span>,
            name: <span class="token string">'时间'</span>,
            type: <span class="token string">'time'</span>,
            attrs: <span class="token punctuation">{</span> type: <span class="token string">'timerange'</span>, placeholder: <span class="token string">'请'</span> <span class="token punctuation">}</span>
          <span class="token punctuation">}</span>,
          <span class="token punctuation">{</span>
            code: <span class="token string">'selectSteps'</span>,
            name: <span class="token string">'联动'</span>,
            type: <span class="token string">'selectStep'</span>,
            attrs: <span class="token punctuation">{</span> placeholder: <span class="token string">'请'</span> <span class="token punctuation">}</span>,
            dataList: <span class="token punctuation">[</span><span class="token punctuation">{</span>
              value: <span class="token string">'beijing'</span>,
              label: <span class="token string">'北京'</span>,
              children: <span class="token punctuation">[</span>
                <span class="token punctuation">{</span>
                  value: <span class="token string">'gugong'</span>,
                  label: <span class="token string">'故宫'</span>
                <span class="token punctuation">}</span>,
                <span class="token punctuation">{</span>
                  value: <span class="token string">'tiantan'</span>,
                  label: <span class="token string">'天坛'</span>
                <span class="token punctuation">}</span>,
                <span class="token punctuation">{</span>
                  value: <span class="token string">'wangfujing'</span>,
                  label: <span class="token string">'王府井'</span>
                <span class="token punctuation">}</span>
              <span class="token punctuation">]</span>
            <span class="token punctuation">}</span><span class="token punctuation">]</span>
          <span class="token punctuation">}</span>,
          <span class="token punctuation">{</span>
            code: <span class="token string">'url'</span>,
            name: <span class="token string">'数据源地址'</span>,
            type: <span class="token string">'stringList'</span>,
            splitter: <span class="token string">','</span>, // 分割符默认逗号
            attrs: <span class="token punctuation">{</span> placeholder: <span class="token string">'请输入数据源地址多个以逗号隔开'</span> <span class="token punctuation">}</span>
          <span class="token punctuation">}</span>,
          <span class="token punctuation">{</span>
            code: <span class="token string">'keyValue'</span>,
            name: <span class="token string">'键值对'</span>,
            type: <span class="token string">'keyValue'</span>
          <span class="token punctuation">}</span>,
          <span class="token punctuation">{</span>
            code: <span class="token string">'list'</span>,
            name: <span class="token string">'列表'</span>,
            span: <span class="token number">2</span>,
            type: <span class="token string">'list'</span>,
            height: <span class="token number">200</span>, // 列表高度超出产生滚动条默认300
            fields: <span class="token punctuation">[</span> // 当fields中字段disabled不为true时渲染控件反之直接展示数据
              <span class="token punctuation">{</span>
                code: <span class="token string">'name'</span>,
                name: <span class="token string">'name'</span>,
                type: <span class="token string">'string'</span>
              <span class="token punctuation">}</span>,
              <span class="token punctuation">{</span>
                code: <span class="token string">'accept'</span>,
                name: <span class="token string">'接受'</span>,
                type: <span class="token string">'checkbox'</span>
              <span class="token punctuation">}</span>,
              <span class="token punctuation">{</span>
                code: <span class="token string">'date'</span>,
                name: <span class="token string">'日期'</span>,
                type: <span class="token string">'date'</span>,
                attrs: <span class="token punctuation">{</span> placeholder: <span class="token string">'请'</span> <span class="token punctuation">}</span>
              <span class="token punctuation">}</span>,
              <span class="token punctuation">{</span>
                code: <span class="token string">'progress'</span>,
                name: <span class="token string">'进度'</span>,
                type: <span class="token string">'percent'</span>
              <span class="token punctuation">}</span>
            <span class="token punctuation">]</span>
          <span class="token punctuation">}</span>
        <span class="token punctuation">]</span>
      <span class="token punctuation">}</span>
</code></pre></div><ol start="5"><li><p>页面展示效果
<img src="/images/form/%E6%95%88%E6%9E%9C.png" alt=""></p></li> <li><p>提交时做rule验证</p></li></ol> <div class="language-bash extra-class"><pre class="language-bash"><code><span class="token function-name function">submit</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console.log<span class="token punctuation">(</span>this.<span class="token variable">$refs</span>.form<span class="token punctuation">)</span>
  this.<span class="token variable">$refs</span>.form.validate<span class="token punctuation">(</span><span class="token punctuation">)</span>
    .then<span class="token punctuation">((</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
       console.log<span class="token punctuation">(</span>this.formData<span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre></div><p>当rule规则未通过是，会提示message</p> <div class="language-bash extra-class"><pre class="language-bash"><code><span class="token punctuation">{</span>
  code: <span class="token string">'area'</span>,
  name: <span class="token string">'地区'</span>,
  type: <span class="token string">'select'</span>,
  attrs: <span class="token punctuation">{</span> placeholder: <span class="token string">'请选择地区'</span> <span class="token punctuation">}</span>,
  dataList: <span class="token punctuation">[</span>
    <span class="token punctuation">{</span> value: <span class="token string">'北京'</span>, name: <span class="token string">'北京'</span> <span class="token punctuation">}</span>,
    <span class="token punctuation">{</span> value: <span class="token string">'南京'</span>, name: <span class="token string">'南京'</span> <span class="token punctuation">}</span>
  <span class="token punctuation">]</span>,
  rules: <span class="token punctuation">[</span>
    <span class="token punctuation">{</span> required: true, message: <span class="token string">'请选择地区'</span>, trigger: <span class="token string">'change'</span> <span class="token punctuation">}</span>
  <span class="token punctuation">]</span>
<span class="token punctuation">}</span>,
</code></pre></div><p><img src="/images/form/rule.png" alt=""></p></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/woytu/notes-vuepress/edit/master//Form/README.md" target="_blank" rel="noopener noreferrer">在 GitHub 上编辑此页</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <!----></footer> <div class="page-nav"><p class="inner"><!----> <span class="next"><a href="/Form/Go操作Windows.html">
        Go操作Windows
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"><!----></div></div>
    <script src="/assets/js/app.269009d6.js" defer></script><script src="/assets/js/3.974b9720.js" defer></script><script src="/assets/js/12.8bb86d91.js" defer></script>
  </body>
</html>
